<template>
  <div ref="top">
    <div
      v-if="spu"
      class="goods"
    >
      <em-tabs
        v-if="spu"
        v-model="active"
        scrollspy
        sticky
        class="mt10"
        @click="onClickTab"
      >
        <em-tab title="商品">
          <!-- BEGIN 商品轮播图 -->
          <swipe-box
            v-model="spu.album"
            :ratio="1"
            :autoplay="25000"
            indicator-number
          />
          <!-- END 商品轮播图 -->

          <!-- BEGIN 商品基本信息 -->
          <em-cell-group class="goods-cell-group">
            <em-cell center>
              <em-currency
                slot="title"
                v-model="goods.price"
                class="goods-price"
              />
              <em-icon
                slot="right-icon"
                name="em-icon-collection-add"
              />
            </em-cell>
            <em-cell
              :title="spu.title"
              :label="spu.description"
            />
          </em-cell-group>
          <!-- END 商品基本信息 -->

          <!-- BEGIN 商品基本信息 -->
          <em-cell-group class="goods-cell-group">
            <em-cell
              title="已选"
              value="1件"
            />
            <em-cell
              title="送至"
              value="山东/济南/历下区"
            />
            <em-cell
              v-if="spu.services.length"
              class="goods-cell-custorm"
            >
              <icon-label
                v-for="(label,index) in spu.services"
                :key="index"
                icon="em-icon-success"
                icon-color="#f56660"
                :label="label"
              />
            </em-cell>
          </em-cell-group>
          <!-- END 商品基本信息 -->
        </em-tab>
        <em-tab title="评价">
          <!-- BEGIN 商品详情 -->
          <em-cell
            title="图文详情"
            label="PICTURE AND TEXT DETAILS"
            class="goods-section-title"
          />
          <!-- END 商品详情 -->
        </em-tab>
        <em-tab title="详情">
          <!-- BEGIN 商品SKU、参数信息 -->
          <em-cell-group class="mt10 goods-section-group">
            <em-cell
              title="商品介绍"
              label="PURCHASE INSTRUCTIONS"
              class="goods-section-title"
            />
            <div class="goods-body-list">
              <el-image
                v-for="(image,index) in spu.body"
                :key="index"
                :src="image.url"
              />
            </div>
            <em-cell
              v-if="spu.spu"
              title="规格参数"
              :label="spu.spu.effective"
            />
            <em-cell
              v-if="spu.buyLimit"
              title="服务"
              :label="spu.buyLimit"
            />
          </em-cell-group>
          <!-- END 商品SKU、参数信息 -->
        </em-tab>
      </em-tabs>
    </div>
    <em-goods-action class="position-absolute">
      <em-goods-action-icon
        icon="em-icon-store"
        text="首页"
      />
      <em-goods-action-icon
        icon="em-icon-customer-service"
        text="客服"
      />
      <em-goods-action-icon
        icon="em-icon-cart"
        text="购物车"
        :badge="carts"
        @click="onCollect"
      />
      <em-goods-action-button
        v-for="(button,index) in controlButtons"
        :key="index"
        :type="button.type"
        :color="button.color"
        :disabled="button.disabled"
        :text="button.text"
      />
    </em-goods-action>
  </div>
</template>

<script>
import SwipeBox from '@/components/SwipeBox'
import IconLabel from '@/components/IconLabel'

export default {
  components: {
    SwipeBox,
    IconLabel
  },
  props: {
    primaryKey: {
      type: [String, Number],
      required: true
    }
  },
  // mixins: [assign],
  data() {
    return {
      active: 2,
      carts: 0,
      showBase: false,
      collected: false,
      spu: null,
      spuContent: null,
      goods: null,
      skuIds: [],
      result: [],
      controlButtons: []
    }
  },
  computed: {
    collect() {
      if (this.collected === true) {
        return {
          icon: 'like',
          color: '#ff5000'
        }
      } else {
        return {
          icon: 'like-o',
          color: ''
        }
      }
    }
  },
  created() {
    this.onLoad()
  },
  mounted() {
    console.log('goods mounted')
  },
  methods: {
    onClickTab(name, title) {
      console.log(name, title)
      if (name === 0) {
        var timer = setInterval(function() {
          const osTop = document.documentElement.scrollTop || document.body.scrollTop
          const ispeed = Math.floor(-osTop / 5)
          document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed
          this.isTop = true
          if (osTop === 0) {
            clearInterval(timer)
          }
        }, 1)
      }
    },
    formatContent(str) {
      return str.replace(/\n|\r\n/g, '<br>')
    },
    toggle(index) {
      this.$refs.checkboxes[index].toggle()
      console.log(this.$refs.checkboxes[index])
    },
    onChange() {
      console.log(this.result)
    },
    onLoad() {
      this.$http.preview.goods(this.primaryKey).then(res => {
        const { data } = res
        this.spu = data.spu
        this.spuContent = data.body
        this.goods = data
        this.carts = data.carts
        this.collected = data.collected
        this.controlButtons = data.controls
        if (this.spu.spu) {
          this.skuIds.push(this.spu.spu.id)
        }
        console.log('skuIds:', this.skuIds)
      })
    },

    onAction(index, event) {},

    getSkuData(data) {
      console.log(data)
      this.$toast(JSON.stringify(data))
    },

    onCollect() {},

    goHome() {}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.em-goods-action {
  z-index: 1;
  &-big-btn {
    &:disabled {
      cursor: not-allowed;
      filter: alpha(opacity=65);
      -webkit-box-shadow: none;
      box-shadow: none;
      opacity: 0.65;
    }
  }
}

.sku-checkbox-group {
  padding: 15px;
  .sku-info {
    color: gray;
    position: relative;
    padding: 5px 8px;
    &-effective {
      font-size: 10px;
      transform: scale(0.8);
      color: green;
      transform-origin: left center;
    }
    &::after {
      border-radius: 6px;
    }
  }
  .em-checkbox {
    // flex-basis: 48%;
    margin: 0 0 15px;
    display: flex;
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.085);
    border-radius: 3px;
    &:last-child {
      margin-bottom: 0;
    }
    &__icon {
      display: none;
    }
    &__label {
      margin: 0;
      display: block;
      width: 100%;
      .em-cell {
        background: transparent;
        border-radius: 3px;
        &__label {
          color: burlywood;
        }
        &__value {
          flex: none;
          color: goldenrod;
          .price {
            &-integer {
              font-family: 'RemingaTitlingRegular';
            }
          }
        }
      }
    }

    &[aria-checked='true'] {
      border-color: rgba(219, 167, 34, 0.5);
      background: rgba(219, 167, 34, 0.1);
      .em-cell {
        color: goldenrod;
        &__label {
          color: #dab30ac9;
        }
      }
    }
  }
}

.goods {
  padding-bottom: 50px;

  &-price {
    color: red;
    font-size: 21px;
    padding: 5px 0;
  }

  &-title {
    font-size: 16px;
    color: #121212;
    font-weight: 500;
    min-height: 24px;
  }
  &-express {
    color: #999;
    font-size: 12px;
    padding: 5px 15px;
  }

  &-detail {
    background: #fff;
    word-wrap: break-word;
    h1 {
      color: #f44;
      font-weight: normal;
    }
    img {
      width: 100%;
    }
  }

  &-section-group {
    .em-cell {
    }
  }
  &-section-title {
    padding: 30px 15px;
    .em-cell {
      &__title {
        text-align: center;
        font-size: 16px;
      }
      &__label {
        color: #e0e0ea;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
      }
    }
  }

  &-mark {
    word-wrap: break-word;
    border: 1px dashed #aaa;
    border-radius: 0.15rem;
    padding: 0.3rem;
    position: relative;
    margin-top: 0.5rem;
    line-height: 0.36rem;
    color: #666;
  }

  &-mark:before {
    position: absolute;
    left: 50%;
    top: 0;
    width: 20%;
    height: 0.4rem;
    line-height: 0.4rem;
    margin-left: -10%;
    margin-top: -0.2rem;
    display: inline-block;
    text-align: center;
    font-weight: 600;
    background: white;
    content: '兑换说明';
  }
}

.framerich {
  padding: 15px;
  & p {
    font-size: 12px;
  }
}

.goods-cell-custorm {
  .em-cell__value {
    display: flex;
    flex-wrap: wrap;
    .tag {
      transform: scale(0.8);
      transform-origin: left center;
    }
  }
}

.goods-body-list {
  display: flex;
  flex-direction: column;
}

.em-tabs__line {
  width: 20px !important;
  bottom: 18px;
}

.em-cell-column {
  &__mark {
    font-size: 14px;
    color: #666;
  }
}
</style>
